iT邦幫忙

2025 iThome 鐵人賽
DAY 7
0
Modern Web

Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站系列 第 7 篇

Day 7 Angular 起手式 – 用 Angular CLI 建立專案骨架

17th鐵人賽
123 瀏覽

  • 分享至 

  • xImage
    •  

今日目標

  • 了解什麼是 Angular CLI
  • 用 Angular CLI 建立一個新的 Angular 專案
  • 認識 Angular 專案的基本資料夾結構
  • 把 Day 6 的靜態履歷網站「搬進 Angular 專案」做骨架

基礎概念：Angular CLI 是什麼？

在前端框架裡，Angular 最大的特色就是一開始就給你一個完整架構：

  • 檔案結構清楚（components / services / modules）
  • 自帶 TypeScript、SCSS 支援
  • 有內建開發伺服器（不用額外設定 Webpack）
  • 只要一個指令就能產生元件、服務，避免手動重複工作

👉 簡單來說，Angular CLI 是「官方提供的開發工具」，幫你把環境建好、架構搭好，你專心寫功能就行。

實作：建立 Angular 專案

1. 安裝 Angular CLI

請先安裝 Node.js（建議 v18 以上）。

終端機輸入：

npm install -g @angular/cli

檢查安裝是否成功：

ng version

2. 建立新專案

在你要存放的資料夾下輸入：

ng new resume-site

CLI 會問幾個問題：

  • Would you like to add Angular routing? → 選 Yes（之後我們會用）
  • Which stylesheet format would you like to use? → 選 SCSS（因為我們 Day 2 已經學了 SCSS）

完成後會自動建立 resume-site/ 專案。

3. 啟動專案

cd resume-site
ng serve

打開瀏覽器進 http://localhost:4200，會看到 Angular 預設的「Welcome」畫面。

認識 Angular 專案結構

進到 src/app/，你會看到幾個重要檔案：

  • app.component.ts → 主要元件（控制畫面邏輯）
  • app.component.html → 模板檔案（放 HTML）
  • app.component.scss → 樣式檔案（放 SCSS）
  • app.module.ts → 模組設定檔，管理哪些元件要一起用

👉 初學者最常改的就是 app.component.html，這裡可以放我們 Day 6 的履歷網站骨架。

把 Day 6 的 HTML 搬進來

  1. 打開 src/app/app.component.html，清空預設內容。
  2. 把你在 Day 6 的 index.html 主要 <body> 裡的 HTML 貼進去（記得 <header> ~ <footer>）。
  3. CSS 部分，先複製 Day 6 的 style.css 內容到 src/app/app.component.scss。

這樣就完成了最初的搬家。之後，我們會一步一步把這些 HTML 區塊「切成 Angular 元件」。

成果

  • 成功用 Angular CLI 建立了一個新專案
  • 在瀏覽器跑起來，網址是 http://localhost:4200
  • 預設畫面被我們換掉，現在已經是 Day 6 的履歷網站骨架

小心踩雷（初學者常見錯誤）

  1. 忘了進資料夾就 ng serve
    • ❌ 在外層執行 → 找不到 Angular 專案
    • ✅ 記得先 cd resume-site
  2. 貼錯地方
    • ❌ 把 HTML 貼到 index.html（Angular 的 index.html 只用來掛 <app-root>）
    • ✅ 要貼的是 app.component.html
  3. CSS 沒有生效
    • ❌ 貼到 styles.css 但找不到樣式
    • ✅ 放在 app.component.scss 才會跟元件一起跑（之後也能抽出來做全域樣式）
  4. ng serve 不斷報錯
    • 檢查 Node.js 版本是否太舊（建議 v18+）
    • 確認 Angular CLI 是否安裝成功（ng version）

下一步（Day 8 預告）

明天，我們要開始「切元件」：

  • 把 Header、Hero、About、Skills、Projects、Contact、Footer 各自變成 Angular 元件
  • 學習 Angular 的 Component 概念
  • 把 Day 6 的單頁 HTML 轉換成 Angular 架構

上一篇
Day 6 小專案：純原生 HTML/CSS/TS 的自我介紹頁（可交付 MVP） 今日目標
下一篇
Day 8 Angular 元件切分 – 把履歷網站拆成模組化架構
系列文
Angular、React、Vue 三框架實戰養成：從零打造高品質前端履歷網站 共 30 篇
  1. 26
    Day 26 Vue 狀態管理 – 用 Pinia 建立集中式 Store（含持久化）
  2. 27
    Day 27 Vue 版履歷網站收尾與部署
  3. 28
    Day 28 React 起手式 – 用 Vite + TypeScript 初始化專案，建立骨架 ## 今日目標
  4. 29
    Day 29 React 資料化 – 用 Props 與 useState 管理 Skills 與 Projects
  5. 30
    Day 30 React 完成版 – Projects 篩選互動 + 三框架總結
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19864 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙